<template>
  <div class="login clearfix">
    <div class="login-wrap">
      <el-row type="flex" justify="center">
        <el-form
          ref="user"
          :rules="validateFormRules"
          :model="user"
          status-icon
          label-width="80px"
        >
          <h3>注册</h3>
          <hr />
          <el-form-item prop="username" label="用户名" size="medium">
            <el-input
              v-model="user.username"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item :prop="user.mode" :label="user.mode">
            <el-input
              v-model="user.email"
              v-show="user.mode == 'email'"
              placeholder="请输入邮箱"
            ></el-input>
            <el-input
              v-model="user.mobile"
              v-show="user.mode == 'mobile'"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-radio v-model="user.mode" label="mobile">手机</el-radio>
            <el-radio v-model="user.mode" label="email">邮箱</el-radio>
          </el-form-item>
          <el-form-item prop="password" label="设置密码">
            <el-input
              v-model="user.password"
              show-password
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>

          <el-form-item prop="code" style="width:250px" label="验证码">
            <el-input v-model="user.code" placeholder="请输入验证码"></el-input>
            <el-button
              class="getcode"
              v-show="canGetCode"
              @click="getCode()"
              type="info"
              >发送验证码</el-button
            >
            <el-button class="getcode" v-show="!canGetCode" type="info" disabled
              >{{ codeReGetTime }} s</el-button
            >
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon @click="doRegister()"
              >注册账号</el-button
            >
          </el-form-item>
          <el-form-item>
            <router-link to="/login" @click="dologin()"
              ><el-button type="primary"
                >已有账号？去登录</el-button
              ></router-link
            >
          </el-form-item>
          <el-form-item label="">
            <router-link to="/">
              <el-button type="info">返回首页</el-button></router-link
            >
          </el-form-item>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { regist, sendValidateCode } from "../../api/User/user";
import { encrypt, decrypt } from '../../utils/encryption'

export default {
  name: "regist",
  components: {},
  data() {
    return {
      user: {
        username: "",
        email: null,
        password: "",
        mobile: null,
        code: "",
        mode: "mobile",
      },
      validateFormRules: {
        username: [
          { required: true, message: "用户名不可为空", trigger: "blur" },
          {
            pattern: /^[A-Za-z0-9]+$/,
            message: "用户名不符合要求",
            trigger: "blur",
          },
          { min: 3, max: 15, message: "长度在 3 到 15 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不可为空", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "邮箱不可为空", trigger: "blur" },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "邮箱不符合要求",
            trigger: "blur",
          },
        ],
        mobile: [
          { required: true, message: "电话不可为空", trigger: "blur" },
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: "电话不符合要求",
            trigger: "blur",
          },
        ],
        code: [{ required: true, message: "验证码不可为空", trigger: "blur" }],
      },
      codeReGetTime: "",
      timer: null,
      canGetCode: true,
    };
  },
  created() {},
  methods: {
    doRegister() {
      var _this = this;
      this.$refs["user"].validate((valid) => {
        if(valid){
          regist(encrypt(JSON.stringify(_this.user))).then((res)=>{
            if(res.flag){
               _this.$router.push("/login");
            }else{
               _this.$message.error("请将表单信息填写完整");
            }
          })
        }
      });
    },
    dologin() {
      this.$router.push("/login");
    },
    getCode() {
      const TIME_COUNT = 60;
      var _this = this;
      let receiver =
        this.user.mode == "mobile"
          ? this.user.mobile
          : this.user.email.slice(0, -4);
      if (receiver == "") {
        this.$message.error("请输入手机号或邮箱！");
        return;
      }
      sendValidateCode(this.user.mode, receiver).then((res) => {
        if (res.flag) {
          if (!_this.timer) {
            _this.codeReGetTime = TIME_COUNT;
            _this.canGetCode = false;
            _this.timer = setInterval(() => {
              if (
                _this.codeReGetTime > 0 &&
                _this.codeReGetTime <= TIME_COUNT
              ) {
                _this.codeReGetTime--;
              } else {
                _this.canGetCode = true;
                clearInterval(this.timer);
                _this.timer = null;
              }
            }, 1000);
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.login {
  margin-top: 5%;
  width: 100%;
  height: 740px;
  background: url("../../assets/R-C.jpg") no-repeat;
  background-size: cover;
  overflow: hidden;
}
.getcode {
  width: 150px !important;
  position: absolute !important;
  left: 150%;
}
.el-form {
  width: 350px;
}
.login-wrap {
  background: url("") no-repeat;
  background-size: cover;
  width: 600px;
  height: 600px;
  margin: 50px auto;
  overflow: hidden;
  padding-top: 10px;
  line-height: 20px;
}

h3 {
  color: #0babeab8;
  font-size: 24px;
}
hr {
  background-color: #444;
  margin: 20px auto;
}

.el-button {
  width: 80%;
  margin-left: -50px;
}
</style>
